<script setup lang="ts">
import { ref, reactive } from 'vue';
import { 
  Typography, 
  Card, 
  Descriptions, 
  Avatar, 
  Button, 
  Form, 
  Input, 
  Tabs, 
  List,
  Tag
} from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';

const { Title } = Typography;

// 用户基本信息
const userInfo = reactive({
  name: '张三',
  email: 'zhangsan@example.com',
  phone: '138****1234',
  joinTime: '2023-01-15',
  status: '正常',
  role: '普通用户'
});

// 表单数据
const formState = reactive({
  name: '张三',
  email: 'zhangsan@example.com',
  phone: '13812341234',
  bio: '这是个人简介内容'
});

const formRef = ref<FormInstance>();

// 历史记录数据
const historyList = ref([
  {
    id: '1',
    title: 'AI文本生成',
    time: '2023-10-05 14:30',
    type: '文本',
    status: '已完成'
  },
  {
    id: '2',
    title: 'AI图像生成',
    time: '2023-10-04 09:15',
    type: '图像',
    status: '已完成'
  },
  {
    id: '3',
    title: 'AI代码生成',
    time: '2023-10-03 16:20',
    type: '代码',
    status: '已完成'
  }
]);

// 保存表单数据
const onSubmit = () => {
  formRef.value?.validate().then(() => {
    // 保存逻辑，这里只是示例
    Object.assign(userInfo, formState);
    console.log('表单提交成功:', formState);
  }).catch(error => {
    console.error('表单验证失败:', error);
  });
};
</script>

<template>
  <div class="profile">
    <Typography>
      <Title>个人中心</Title>
    </Typography>

    <div class="profile-content">
      <Card class="profile-card">
        <div class="user-header">
          <Avatar :size="80">{{ userInfo.name.charAt(0) }}</Avatar>
          <div class="user-info">
            <h2>{{ userInfo.name }}</h2>
            <p>{{ userInfo.email }}</p>
          </div>
        </div>
      </Card>

      <Tabs>
        <Tabs.TabPane key="info" tab="基本信息">
          <Card>
            <Descriptions title="用户信息" bordered>
              <Descriptions.Item label="用户名">{{ userInfo.name }}</Descriptions.Item>
              <Descriptions.Item label="邮箱">{{ userInfo.email }}</Descriptions.Item>
              <Descriptions.Item label="手机号">{{ userInfo.phone }}</Descriptions.Item>
              <Descriptions.Item label="注册时间">{{ userInfo.joinTime }}</Descriptions.Item>
              <Descriptions.Item label="账户状态">{{ userInfo.status }}</Descriptions.Item>
              <Descriptions.Item label="用户角色">{{ userInfo.role }}</Descriptions.Item>
            </Descriptions>
          </Card>
        </Tabs.TabPane>

        <Tabs.TabPane key="edit" tab="编辑资料">
          <Card>
            <Form
              :model="formState"
              ref="formRef"
              name="profileForm"
              :label-col="{ span: 4 }"
              :wrapper-col="{ span: 16 }"
            >
              <Form.Item
                label="用户名"
                name="name"
                :rules="[{ required: true, message: '请输入用户名!' }]"
              >
                <Input v-model:value="formState.name" />
              </Form.Item>

              <Form.Item
                label="邮箱"
                name="email"
                :rules="[{ required: true, type: 'email', message: '请输入有效的邮箱!' }]"
              >
                <Input v-model:value="formState.email" />
              </Form.Item>

              <Form.Item
                label="手机号"
                name="phone"
              >
                <Input v-model:value="formState.phone" />
              </Form.Item>

              <Form.Item
                label="个人简介"
                name="bio"
              >
                <Input.TextArea v-model:value="formState.bio" :rows="4" />
              </Form.Item>

              <Form.Item :wrapper-col="{ offset: 4 }">
                <Button type="primary" @click="onSubmit">保存更改</Button>
              </Form.Item>
            </Form>
          </Card>
        </Tabs.TabPane>

        <Tabs.TabPane key="history" tab="历史记录">
          <Card>
            <List
              itemLayout="horizontal"
              :dataSource="historyList"
            >
              <template #renderItem="{ item }">
                <List.Item>
                  <List.Item.Meta
                    :title="item.title"
                    :description="item.time"
                  />
                  <div class="history-item-actions">
                    <Tag color="blue">{{ item.type }}</Tag>
                    <Tag color="green">{{ item.status }}</Tag>
                  </div>
                </List.Item>
              </template>
            </List>
          </Card>
        </Tabs.TabPane>
      </Tabs>
    </div>
  </div>
</template>

<style scoped>
.profile {
  max-width: 1000px;
  margin: 0 auto;
}

.profile-content {
  margin-top: 20px;
}

.user-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-info h2 {
  margin-bottom: 4px;
}

.user-info p {
  color: rgba(0, 0, 0, 0.45);
  margin: 0;
}

.history-item-actions {
  display: flex;
  gap: 8px;
}
</style> 